<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面登录-问卷星</title>
		<link rel="stylesheet" href="css/项目二.css" />
		<style>
			body
			{
				background-attachment: fixed;		/* 图片固定 */
				background-position: center;		/* 图片居中 */
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;		/* 图片不重复 */
				background-size: cover;			/* 图片全屏 */
			}
			.a1
			{
				color: white;
			}
			.a2
			{
				font-size: 10px;
			}
			.button
			{
				padding: 0px 121px;
				background-color:#F79000;
				text-align: center;
				line-height: 30px;
				color: white;
				border-style: none;
				text-decoration: none;
			}
			.button1
			{
				padding: 8px 23px;
				text-align: center;
				line-height: 50px;
				color: white;
				border: 0.5px solid white;
				text-decoration: none;
				border-radius: 100px;
				font-size: 15px;
			}
			.button2
			{
				padding: 8px 23px;
				text-align: center;
				line-height: 50px;
				color: white;
				border: 0.5px solid white;
				text-decoration: none;		/* 取消链接下划线 */
				border-radius: 100px;		/* 圆角 */
				font-size: 15px;
				margin-left: 20px;
			}
			.button1:hover
			{
				border: 2px solid white;
			}
			.button2:hover
			{
				border: 2px solid white;
			}
			.card
			{
				width: 30px;
				height: 30px;
				position: relative;
				display: inline-block;
				
			}
			.card .img-top
			{
				display: none;
				        position: absolute;
				        top: 0;
				        left: 0;
				        z-index: 99;
			}
			.card:hover .img-top
			{
			  display: inline;
			}
		</style>
	</head>
	<body>
		<div class="bigbox1">
			<div class="xbox1">
				<div class="xxbox1" style="cursor: pointer" >账号登录
				<div class="hxbox"></div>
				</div>
				<div class="xxbox2" style="cursor: pointer">验证码登录</div>
			</div>
			<div class="xbox2">
				<input class="user-input" type="text" name="search" placeholder="用户名/Email/手机" />
			</div>
			<div class="xbox3">
				<input class="user-input" type="text" name="search" placeholder="请输入登录密码" />
			</div>
			<div class="xbox4">
				<div class="xxbox3"><input type="checkbox" name="gxh" /><span>下次自动登录</span></div>
				<div class="xxbox4"><a href="">忘记用户名/密码？</a></div>
			</div>
			<div class="xbox5">
				<a href="" class="button" class="a2">登录</a>
			</div>
			<div class="xbox6">
				<div class="xxbox6"><a href="#">立即注册</a></div>
			</div>
			<div class="xbox7">
				<div class="xxbox7"></div>
				<div class="xxbox8">更多登录方式</div>
				<div class="xxbox9"></div>
			</div>
			<div class="xbox8">
				<div class="xxbox10">
				<a href=""><div class="card">
				<img src="img/QQ登录2.png" width="40" />
				<img src="img/QQ登录1(1).png" width="40" class="img-top" />
				</div></a>
				  &ensp;&ensp;&ensp;&ensp;&ensp;<a class="a2">QQ登录</a>
				  </div>
				  <div class="xxbox11">
					  <a href=""><div class="card">
						  <img src="img/微信登录2.png" class="img-top" width="40" />
						  <img src="img/微信登录1.png"  width="40" />
					  </div> </a>&ensp;&ensp;&ensp;&ensp;&ensp;<a class="a2">微信登录</a>
				  </div>
				 <div class="xxbox12">
					 <a href=""><div class="card">
					 <img src="img/企业微信1.png" width="40" alt="" />
					 <img src="img/企业微信2.png" width="40" class="img-top" alt="" />
					 </div>
					 </a>
					 &ensp;&ensp;&ensp;&ensp;&ensp;<a class="a2">企业微信</a>
					 
					 
				 </div>
				
			</div>
			
			
		</div>
		<a href=""><div class="bigbox2"><img src="img/wjx-logo@2x.png" width="120"/></div></a>
		<div class="bigbox3">
			<a href="" class="button1">注册</a>
			<a href="" class="button2">返回首页</a>
		</div>
		<div class="bigbox4"><br />《登顶武功山》<br />拍摄于问卷星团队二月徒步之旅</div>
	</body>
</html>
